<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HuangSiYi-publish</title>
    <style>
        /*重置样式*/
        *{
            margin: 0;
            padding: 0;
        }
        /*最外层*/
        .PC-warpPer{
            width: 100vw;
            height: 700px;

        }
        .PC-warpPer-hd-topPic{
            width: 100vw;
            height: 160px;

        }
        .PC-warpPer-hd-topPic img{
            width: inherit;
            height: inherit;

        }
        .PC-warpPer-hd-meun{
            font-size: 0;
            width: 100vw;
            height: 50px;

            background: linear-gradient(to left,#daa33f,#cd582c,#b7552e,#cf7f44);

        }
        .PC-warpPer-hd-meun a{
            color:#ccc;
            letter-spacing: 3px;
            font-weight: bold;
            line-height: 50px;
            text-decoration: none;
            text-align: center;
            font-size: 16px;
            display: inline-block;
            width: 14%;

        }
        .PC-warpPer-hd-meun a:hover{
            text-decoration: underline;
            border-radius: 5px;
            border-left: 2px solid #fff;
            border-right: 2px solid #fff;
            color: rgba(255 ,0,0 ,.4);
        }
        .PC-warpPer-bd{
            margin:  10px auto auto;
            width: 80vw;
            height: 270px;

        }
        .PC-warpPer-bd-item-left{
            position: relative;
            display: inline-block;
            width: 50%;
            height: 260px;

        }
        .PC-warpPer-bd-item-right{
            overflow: hidden;
            float: right;
            width: 47%;
            height: 260px;

        }
        /*清除浮动*/
        .clearFix::after{
            content: '';
            display: block;
            clear: both;
        }
        .PC-warpPer-bd-item-right .Teaching{
            height: 40px;
            border-bottom: 2px salmon solid;

        }
        .class-dynamic{
            text-align:center;
            display: inline-block;
            width: 100px;
            line-height: 40px;
            border-radius: 3px;
            letter-spacing: 2px;
            font-weight: bold;
            color: rgba(0,0,0,0.5);
            background: linear-gradient(to left,#daa33f,#cd582c,#b7552e,#cf7f44);
        }
        .even-more{

            float: right;
            display: inline-block;
            width: 100px;
            line-height: 40px;
            background: url("image/der.png");
            background-size: 20px 20px;
            background-repeat: no-repeat;
            background-position: 50% 50%;
        }
        .text-title{
            color: rgba(0,0,0,0.8);
            margin-left: -5px;
            letter-spacing: 3px;
            font-weight: bold;
            display: inline-block;
            vertical-align: middle;
        }
        .pointToImg{

            display: inline-block;
            vertical-align: middle;
        }
        .main-content{

            margin-top: -5px;
            color: #9d9895;
            padding-left: 5px;
            text-indent: 2em;
            display: inline-block;
        }
        .ponts-item{
            position: absolute;
            bottom: 10px;
            width: 200px;
            height: 20px;
            background:red;

            left: 0;
            right: 0;
            margin: auto;

        }
        .ponts-item span{
            position: relative;
            top: -5px;
            left: 10px;
            z-index: 88;
            display: inline-block;
            height: 5px;

            width: 15%;
            background: #cccccc;
        }
        .item-scrolLicon{
            position: absolute;
            top: 0;
            width: 100%;
            height: 260px;
        }
        .PC-warpPer-ft{
            width: 100vw;
            height: 200px;

        }
        ol{
            margin:  20px auto auto;
            font-size: 0;
            width: 80vw;
            height: 50px;

            background: linear-gradient(to left,#daa33f,#cd582c,#b7552e,#cf7f44);

        }
        li{

            color:#ccc;
            letter-spacing: 3px;
            font-weight: bold;
            line-height: 50px;
            text-decoration: none;
            text-align: center;
            font-size: 16px;
            display: inline-block;
            width: 19%;
        }
        li:hover {


            text-decoration: underline;
            border-radius: 5px;
            border-left: 2px solid #fff;
            border-right: 2px solid #fff;
            color: rgba(255, 0, 0, .4);
        }
        .ft-text{
            display: block;
            margin:  20px auto auto;

            width: 80vw;
            height: 50px;
        }
        li:nth-of-type(1){
            color: black;
            background: yellow;
        }
        .ft-menunews:hover{
            background: yellow;
        }

    </style>

</head>
<body>
    <!--最外层框架-->
<div class="PC-warpPer">
    <!--头部-->
    <div class="PC-warpPer-hd">
        <div class="PC-warpPer-hd-topPic">
            <img src="image/titleImg.jpg" alt="">
        </div>
        <div class="PC-warpPer-hd-meun">
            <a href="http://www.hbmy.edu.cn/templet/default/index.html/">班级主页</a>
            <a href="http://www.hbmy.edu.cn/templet/default/index.html/">班级介绍</a>
            <a href="http://www.hbmy.edu.cn/templet/default/index.html/">通讯录</a>
            <a href="http://www.hbmy.edu.cn/templet/default/index.html/">班级动态</a>
            <a href="http://www.hbmy.edu.cn/templet/default/index.html/">班级相册</a>
            <a href="http://www.hbmy.edu.cn/templet/default/index.html/">班级视频</a>
            <a href="http://www.hbmy.edu.cn/templet/default/index.html/">班级记忆</a>
        </div>

    </div>
    <!--content-->
    <div class="PC-warpPer-bd clearFix">
        <div class="PC-warpPer-bd-item-left">
            <div class="item">
                <img  class="item-scrolLicon" src="image/byz.png" alt="" style="background:#4372c1">
                <img  class="item-scrolLicon" src="image/scrollicon.jpg" alt="">
                <img  class="item-scrolLicon" src="image/xiaoyan1.jpg" alt="">
                <img  class="item-scrolLicon" src="image/xiaoyuan2.jpg" alt="">
                <img  class="item-scrolLicon" src="image/byz.png" alt="">
            </div>
            <div class="ponts-item">
                <span class="point-item-icon"></span>
                <span class="point-item-icon"></span>
                <span class="point-item-icon"></span>
                <span class="point-item-icon"></span>
                <span class="point-item-icon"></span>
            </div>
        </div>

        <div class="PC-warpPer-bd-item-right">
            <div class="Teaching clearFix">
                <a href="http://www.hbmy.edu.cn/templet/default/index.html/" class="class-dynamic">班级动态</a>
                <a href="http://www.hbmy.edu.cn/templet/default/index.html/"> <span class="even-more">更多</span></a>
            </div>
            <div class="hint-textContent">
                <img class="pointToImg" src="image/sanjiao1.png" alt="">
                <a href="http://www.hbmy.edu.cn/templet/default/index.html/"><span class="text-title">毕业论文答辩主要事项</span></a>
                    <br>
                <span class="main-content">4月17日，我校2019年春季运动会在五环体育场隆重开幕，党委书记**等进行的精彩的演讲</span>
            </div>
            <div class="hint-textContent">
                <img class="pointToImg" src="image/sanjiao1.png" alt="">
                <a href=""><span class="text-title">毕业论文答辩主要事项</span></a>
                <br>
                <span class="main-content">4月17日，我校2019年春季运动会在五环体育场隆重开幕，党委书记**等进行的精彩的演讲</span>
            </div>
            <div class="hint-textContent">
                <img class="pointToImg" src="image/sanjiao1.png" alt="">
                <a href=""><span class="text-title">毕业论文答辩主要事项</span></a>
                <br>
                <span class="main-content">4月17日，我校2019年春季运动会在五环体育场隆重开幕，党委书记**等进行的精彩的演讲</span>
            </div>
        </div>
    </div>
    <div class="PC-warpPer-ft">
        <div class="PC-warpPer-ft-item">
            <ol>
                <li class="ft-menunews">班级通知</li>
                <a href="http://www.hbmy.edu.cn/templet/default/index.html/"> <li class="ft-menunews" style="background: ">学校主页</li></a>
                <li class="ft-menunews">民院风景</li>
                <li class="ft-menunews">毕业设计要求</li>
                <li class="ft-menunews">学校的标志</li>
            </ol>
            <div class="ft-text">
            <h3>通知</h3>
            <p>请各位同学注意的，4月17日，我校2019年春季运动会在五环体育场隆重开幕，党委书</p>
            <p>爱学校，爱风景，在劳动</p>
                  <p>请各位同学注意的，4月17日，我校2019年春季运动会在五环体育场隆重开幕</p>
            <p>奔跑吧！少年，</p>
            </div>
        </div>
    </div>
</div>

</body>
<script>
    window.onload = function ()
    {
        // 编程
        /*
        * author:HuangSiYi
        * date:2019-5-*/

        var icons = document.getElementsByClassName('item-scrolLicon');
        var points = document.getElementsByClassName('point-item-icon');
        var lis = document.getElementsByClassName('ft-menunews');
        var text = document.getElementsByClassName('ft-text');
        var h3tag = document.getElementsByTagName('h3')[0];

        var count = 0;
        (function paly() {setInterval(function () {
            count++;
            count = count % points.length;
            for (var i = 0; i < icons.length;i ++){
                icons[i].style.zIndex = '0';
                points[i].style.background = '#ccc';

            }
            icons[count].style.zIndex = '66';
            points[count].style.background = '#4372c1';

        },1500)})();
        (function show() {
              window.addEventListener('mouseover',function (e) {
                  var event = e || window.event;
                  nodes = event.target || event.srcElement;

                  if (nodes.className === 'ft-menunews'){
                      lis[0].style.background ='#daa33f';
                        h3tag.innerHTML = nodes.innerText;

                        text.style.display ='block';


                  }

              })

        })();
    }
</script>
</html>